<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div th:fragment="common_header" style="width: 297mm; border: 1px solid #DDD;margin: 0 auto; padding: 1em;">
    <div style="display: flex;flex-direction: row;align-items: center;">
        <div style="flex-grow: 1;">
            <strong>浏览器打印设置：</strong>
            <p style="color: #009ad6;">1.将页边距设置为0；2.页眉页脚设置为空；3.选择横向打印；<strong>4.点击右则按钮进行打印；</strong></p>
        </div>
        <div style="">
            <button id="btn_submit" onclick="print()" type="submit" class="" style="padding: 1em;border-radius: .5em;background-color: #f47920;color: #fff;font-size: 22px;">点此打印</button>
        </div>
    </div>
    <div class="cover">
        <div class="loading"><img src="/res/inspinia/js/plugins/justified-gallery/loading.gif"/></div>
    </div>
    <style type="text/css">
        .cover{
            position:absolute;left:0px;top:0px;
            background:rgba(0, 0, 0, 0.4);
            width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
            height:100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            z-Index:999;
        }
        .loading{
            position:absolute;
            top:50%;
            left:50%;
            background-color:#fff;
            z-Index:9999;
        }
    </style>
    <script src="/res/jquery/jquery-3.5.0.js"></script>
    <script src="/res/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="/res/jquery/jquery.jqprint-0.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.cover').hide()
        })
    function print(){
        $("#printDiv").jqprint();
    }
    </script>
</div>
</body>